<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#sun{
			width:200px; height: 200px; background: orange;
			position: absolute; left: 400px; top: 200px;
			border-radius: 50%;
		}
	</style>
	<script type="text/javascript">
		
		//缓冲运动
		onload = function(){
			var sun = document.getElementById("sun");
			
			var earth = document.getElementById("earth");
			var moon = document.getElementById("moon");
			
			var center_sun = {x:sun.offsetLeft+sun.offsetWidth/2, y:sun.offsetTop+sun.offsetHeight/2};
			
			var degree_earth = 0;
			var degree_moon = 45;
			
			setInterval(function(){
				earth.style.left = center_sun.x + 150*Math.cos(degree_earth*Math.PI/180) - earth.offsetWidth/2 + "px";
				earth.style.top = center_sun.y + 150*Math.sin(degree_earth*Math.PI/180) - earth.offsetHeight/2 + "px";
				
				var center_earth = {x:earth.offsetLeft+earth.offsetWidth/2, y:earth.offsetTop+earth.offsetHeight/2};
				
				moon.style.left = center_earth.x + 20*Math.cos(degree_moon*Math.PI/180) - moon.offsetWidth/2 + "px";
				moon.style.top = center_earth.y + 20*Math.sin(degree_moon*Math.PI/180) - moon.offsetHeight/2 + "px";
				
				degree_earth++;
				degree_moon += 5;
			},30);
		}
	</script>
	<body>
		<div id="sun">
			
		</div>
		<div id="earth" style="width: 20px; height: 20px; border-radius: 50%; position: absolute; left:400px; top: 200px; background: blue;">
			
		</div>
		
		<div id="moon" style="width: 10px; height: 10px; border-radius: 50%; position: absolute; left:300px; top: 200px; background: gray;">
			
		</div>
	</body>
</html>
